import router from '@/router'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '@/store'
import { asyncRoutes } from '@/router'

const whiteList = ['/login', '/404']
// 全局前置路由守卫
router.beforeEach(async (to, from, next) => {
  nprogress.start()
  if (store.getters.token) {
    if (to.path === '/login') {
      // 中断当前导航，直接放行重定向到主页
      next('/')
      nprogress.done()
    } else {
      // 判断是否获取过用户资料
      if (!store.getters.userId) {
        // 获取到返回的用户资料，并直接解构赋值拿取里面的角色权限对象
        const { roles } = await store.dispatch('user/getUserInfo')
        // 取出角色权限对象中的页面路由权限点数组
        const menus = roles.menus
        // 筛选出符合 页面路由权限点 的动态路由配置数组
        const filterRoutes = asyncRoutes.filter(item => menus.includes(item.name))
        // 修改store下user模块中state数据存储的数据 routes
        store.commit('user/SET_ROUTES', filterRoutes)
        // 重定向到404页面一定要放在筛选出来的动态路由数组的最后面，再整体加进router的路由配置里
        // 把符合条件的动态路由 加到 路由器的路由配置数组中，使用一个已经定义好的方法
        router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }])
        // 添加动态路由之后需要告知一下放行的目标路由的路径
        // 不这么写的话，从首页切换到动态路由组件页面，会正常显示，但是刷新后页面就不显示了，显示空白页
  // 这是由于路由添加是异步的，使用 next(to.path)方法可以确保路由器加载完动态添加的路由配置后再放行到目标路径。
        next(to.path)
      } else {
        next()
      }
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 中断当前导航，直接放行重定向到登录页
      next('/login')
      nprogress.done()
    }
  }
})

// 全局后置路由守卫
router.afterEach((to, from) => {
  nprogress.done()
})